<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style-type: none;
            background-color: beige;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <ul>
        
    </ul>
    <script src="./jquery-3.7.1.js"></script>
    <script>
        $(function(){
            // 使用ajax 函数
            $.ajax({
                // 4个属性参数
                "url":"http://172.27.218.120/shoppingcar/list/",
                "type":"post",
                "data":{}, // 如果没有发送的数据，写一个空对象
                // 返回数据类型
                "dataType":"json",

                // 2个回调参数 d代表后台返回的数据
                "success":function(d){
                    //console.log(d);
                    // 结合dom操作，把获取到的数据显示到页面上
                    // element 代表的是正在遍历的那一个对象
                    d.forEach(element => {
                        // 构建模版字符串
                        var str = `<li>
                                        <p>${element.p_name}</p>
                                        <p>${element.p_price}</p>
                                    </li>`;
                        // 追加到ul列表中
                        // $(str) $() 使用工厂函数把一个字符串标签转换为jquery节点对象
                        $("ul").append($(str));
                    });
                },
                "error":function(){

                }
            })

        })

        // json 本质就是一个特殊的字符串

        // 把对象转为json 
        var student = {
            name:'张三',
            age:21,
            sex:'男'
        }
        var json = JSON.stringify(student);
        console.log(json);

        // 把json转换为对象
        var json2 = "{\"name\":\"张珊\",\"age\":18,\"sex\":\"女\"}";
        var student2 = JSON.parse(json2);
        console.log(student2);


        var students = [
                            {
                                name:'张三1',
                                age:21,
                                sex:'男'
                            },
                            {
                                name:'张三2',
                                age:21,
                                sex:'男'
                            },
                            {
                                name:'张三3',
                                age:21,
                                sex:'男'
                            }
                        ];
        console.log(JSON.stringify(students));             




    </script>
</body>
</html>